<template>
<div>
  <vm-common-header
    :pageTitle="pageTitle"
    :goBack="goBack"></vm-common-header>
  <tab
    bar-active-color="#d9271b"
    active-color="#d9271a">
    <tab-item selected @on-item-click="onItemClick">
      <i class="vm-icon bill"></i>
      单据
    </tab-item>
    <tab-item @on-item-click="onItemClick">
      <i class="vm-icon project-info"></i>
      项目信息
    </tab-item>
  </tab>
  <vm-common-search-view
    :screen="true"
    type="projectPage"
    v-if="myBillIndex == 1"
    _type="1"></vm-common-search-view>
  <div 
  class="vm-myBill-container" 
  :class="[{'vm-myBill-container first': myBillIndex == 0 }]">
    <!-- 单据 -->
    <mt-loadmore 
    :top-method="loadTop" 
    :bottom-method="loadBottom" 
    :autoFill="false" 
    :bottom-all-loaded="allLoaded" 
    ref="loadmore0" >
      <div class="vm-common-item-list" v-if="myBillIndex == 0">
        <ul class="content">
          <router-link 
          :to="'/common_details/'+ item.id + '/' + item.objtype" 
          tag="li" 
          class="common-item-box" 
          v-for="(item,key) in billData" 
          :key="key">
            <div :class="['idx-warp-l']"></div>
            <div class="idx-warp-r">
              <div class="idx-r-t">
                <span class="t-type">{{ item.title }}</span>
              </div>
              <p class="idx-r-b">{{ item.description }}</p>
              <div class="idx-r-f">
                <span class="f-area">负责人：{{ item.person }}</span>
                <span class="f-billTime">制单时间：{{ item.created_time }}</span>
              </div>
            </div>
          </router-link>
        </ul>
        <vm-common-noData v-if="!billData.length"></vm-common-noData>
    </div>
    </mt-loadmore>
    <!-- 项目信息 -->
    <mt-loadmore
      :top-method="loadTop"
      :bottom-method="loadBottom"
      :autoFill="false"
      :bottom-all-loaded="allLoaded"
      ref="loadmore1" >
      <div class="project-list-warp" v-if="myBillIndex == 1">
      <ul class="content">
        <router-link :to="'/project/details/' + list.id" tag="li" class="common-item-box" v-for="(list, key) in billprojectListData" :key="key">
          <div :class="['idx-warp-l','vm-icon',list.iconClass]"></div>
          <div class="idx-warp-r">
            <div class="idx-r-t">
              <span class="t-type">{{ list.typeid }}</span>
              <span class="t-time">{{ list.posttime }}</span>
            </div>
            <p class="idx-r-b">{{ list.stitle }}</p>
            <div class="idx-r-f">
              <span class="f-area">地址：{{ list.province }}</span>
              <span :class="['f-type']">阶段：{{ list.times }}</span>
            </div>
          </div>
        </router-link>
      </ul>
    </div>
    </mt-loadmore>
  </div>
</div>
</template>

<script>
import vmCommonHeader from '@/components/vm-common-header' // header 组件
import vmCommonSearchView from '@/components/vm-common-search-view' // 搜索组件
import { Tab, TabItem } from 'vux'
import { myOffer } from '@/api/my_offer.js'
import { getVmProjectData } from '@/api/project.js'
import { mapState } from 'vuex'
export default {
    data () {
      return {
        pageTitle: this.$route.meta.pageTitle,
        goBack: this.$route.meta.goBack,
        myBillIndex: 0, // 切换索引
        allLoaded: false, // 是否还有数据
        billData: new Array(), // 单据数据
        billPage: 1, // 单据数据页数
        projectData: new Array(), // 项目数据
        projectPage: 1, // 项目数据页数
        projectValue: '' // 项目信息公司搜索
      }
    },
    computed : {
      ...mapState({
        billprojectListData: state => state.project.billprojectListData,
        billSearchHistory: state => state.project.billSearchHistory
      })
    },
    created () {
      this.getMyOfferList();
    },
    mounted () {
      this.$root.Bus.$on('vmCommonSearchV', (value) => {
        this.projectValue = value;
        this.getMyprojectList(true);
      })
    },
    methods: {
      // 获取我的制单列表数据
      getMyOfferList(reset, loadmoreType){
        let billPage = this.billPage;
        myOffer(billPage).then(res => {
          if ( !res.data.data.length ) {
            this.allLoaded = true;
            if ( loadmoreType == 'top' ) {
              this.$refs.loadmore0.onTopLoaded();
            } else if( loadmoreType == 'bottom' ){
              this.$refs.loadmore0.onBottomLoaded();
            }
            return;
          };
          if (reset){
            this.billData = res.data.data;
            this.allLoaded = false;
          } else {
            if (this.billData.length) {
              this.billData = this.billData.concat(res.data.data);
            } else {
              this.billData = res.data.data;
            }
          }
          if ( loadmoreType == 'top' ) {
            this.$refs.loadmore0.onTopLoaded();
          } else if( loadmoreType == 'bottom' ){
            this.$refs.loadmore0.onBottomLoaded();
          }
        })
      },
      // 获取项目信息列表数据
      getMyprojectList(reset, loadmoreType) {
        let data = {
          page: this.projectPage,
          companyName: this.projectValue
        }
        if (this.billSearchHistory !== null) {
          Object.assign(data,this.billSearchHistory);
        }
        getVmProjectData({...data}).then(res => {
          let projectInfoArr = res.data.data.data;
          if (!projectInfoArr.length) {
            this.allLoaded = true;
            if ( loadmoreType == 'top' ) {
              this.$refs.loadmore1.onTopLoaded();
            } else if( loadmoreType == 'bottom' ){
              this.$refs.loadmore1.onBottomLoaded();
            }
          }
          projectInfoArr = projectInfoArr.map(( item, key, arr ) => {
            switch (item.typeid) {
              case "电力":
                item.iconClass = 'power'
                break;
              case "环保":
                item.iconClass = 'environmental';
                break;
              case "石油石化":
                item.iconClass = 'petrochemical';
                break;
              case '冶金':
                item.iconClass = 'metallurgy';
                break;
              case '化工':
                item.iconClass = 'chemical';
                break;
              case '交通':
                item.iconClass = 'traffic';
                break;
              case '建筑':
                item.iconClass = 'architecture';
                break;
              case "制药":
                item.iconClass = 'pharmacy';
                break;
              case "其他行业":
                item.iconClass = 'other';
                break;
              default:
                item.iconClass = 'other';
                break;
            }
            switch (item.times) {
              case '手续审批':
                item.className = 'examining'
                break;
              case '立项申报':
                item.className = 'entryDeclaration';
                break;
              case '工程设计':
                item.className = 'projectEd';
                break;
            }
            return item;
          });
          if (reset) {
            this.$store.dispatch("storageBillProjectList", projectInfoArr);
            this.allLoaded = false;
          } else {
            if (this.billprojectListData.length) {
              this.$store.dispatch("storageBillProjectList", this.billprojectListData.concat(projectInfoArr));
            } else {
              this.$store.dispatch("storageBillProjectList", projectInfoArr);
            }
          }
          if ( loadmoreType == 'top' ) {
            this.$refs.loadmore1.onTopLoaded();
          } else if( loadmoreType == 'bottom' ){
            this.$refs.loadmore1.onBottomLoaded();
          }
        })
      },
      // 点击切换分类
      onItemClick (index) {
        this.myBillIndex = index;
      },
      // 下拉刷新
      loadTop () {
        if ( this.myBillIndex == 0 ) {
          this.billPage = 1;
          this.getMyOfferList(true,'top');
        } else {
          this.projectPage = 1;
          this.getMyprojectList(true,'top');
        }
      },
      // 上拉加载
      loadBottom () {
        if ( this.myBillIndex == 0 ) {
          this.billPage ++;
          this.getMyOfferList(false,'bottom');
        } else {
          this.projectPage ++;
          this.getMyprojectList(false,'bottom');
        }
      },
    },
    components: {
      'vm-common-header': vmCommonHeader,
      'vm-common-search-view': vmCommonSearchView,
      Tab,
      TabItem
    },
    watch: {
      myBillIndex(newV) {
        this.billPage = 1;
        this.projectPage = 1;
        this.allLoaded = false;
        if (newV == 1) {
          this.getMyprojectList(true);
        } else if (newV == 0){
          this.getMyOfferList(true);
        }
      }
    }
}
</script>

<style lang="scss">
  .vux-tab-wrap {
    padding: 0 !important;
    height: 80px !important;
    .vux-tab-container {
      z-index: 999;
      height: 80px !important;
      border-bottom: 1px solid #eeeeee; /* no */
      .vux-tab {
        height: 80px;
        .vux-tab-item {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28px;
          i.vm-icon.bill {
            width: 28px;
            height: 34px;
            display: inline-block;
            background-position: -90px -179px;
            margin-right: 10px;
          }
          i.vm-icon.project-info {
            width: 32px;
            height: 34px;
            display: inline-block;
            background-position: -87px -251px;
            margin-right: 10px;
          }
        }
        .vux-tab-item.vux-tab-selected {
          i.vm-icon.bill {
            width: 28px;
            height: 34px;
            display: inline-block;
            background-position: -90px -143px;
            margin-right: 10px;
          }
          i.vm-icon.project-info {
            width: 32px;
            height: 34px;
            display: inline-block;
            background-position: -87px -215px;
            margin-right: 10px;
          }
        }
      }
    }
  }
  .vm-myBill-container.first {
    height: calc( 100% - 100px ) !important;
  }
  .vm-myBill-container {
    margin-top: 20px;
    height: calc( 100% - 200px );
    overflow: scroll;
    background-color: #fff;
    .content {
      overflow: scroll;
    }
    .vm-common-item-list {
      overflow: scroll;
      .idx-warp-l {
        background: url("../../../static/images/vm-common-ltem-list.png") no-repeat;
        background-size: cover;
        width: 60px !important;
        height: 60px !important;
      }
      .idx-warp-r {
        .idx-r-t {
          .t-type {
            font-size: 32px;
            font-weight: bold;
            color: #6a759c;
          }
        }
        p.idx-r-b {
          font-size: 26px !important;
          color: #333333 !important;
        }
      }
      .idx-r-f {
        .f-billTime {
          font-size: 24px;
          color: #666666;
        }
      }
    }
  }
</style>
